import React, { useState } from "react";
import { useCountQuery, useAdd_CountMutation, useOn_New_CountSubscription } from "./generated/graphql";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  const async_count = useCountQuery({ notifyOnNetworkStatusChange: true });
  const [add_count, add_count_res] = useAdd_CountMutation();
  const subscription_count = useOn_New_CountSubscription();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello Vite + React!</p>
        <p>
          <button onClick={() => setCount(count => count + 1)}>count is: {count}</button>
        </p>
        <p>
          <button onClick={() => async_count.refetch()}>
            async count is: {async_count.loading ? "..." : async_count.data?.count}
          </button>
        </p>
        <p>
          <button onClick={() => add_count()}>
            add count is: {add_count_res.loading ? "..." : add_count_res.data?.add_count}
          </button>
        </p>
        <p>
          <span>{subscription_count.data?.on_new_count}</span>
        </p>
        <p>
          Edit <code>App.tsx</code> and save to test HMR updates.
        </p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
